<template>
  <div class="container">
    <h3 class="t_a mb_20" v-if="orderNo">订单{{ orderNo }} 流转详情</h3>
    <div class="mt_20 mb_20" v-if="totalSteps">
      <steps
        :currentStep="currentStep"
        :totalSteps="totalSteps"
        :stepsData="stepsData"
        @clickSteps="clickSteps"
        @querySubList="querySubList"
      />
   
    </div>
    <div style="margin-bottom: 10px">
      <el-input v-model="inputSpecs" placeholder="请输入规格" />
      <el-input
        v-model="inputNumber"
        placeholder="请输入模具编号"
        style="margin-left: 10px"
      />
      <el-button @click="resetInput" style="margin-left: 10px">重置</el-button>
      <el-button @click="inputSearch" type="primary">查询</el-button>
    </div>


    

    <el-table v-loading="isLoading" :data="tableData" border class="table">
      <el-table-column
        prop="specs"
        label="规格"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="number"
        label="模具编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="startTime"
        label="开始时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="endTime"
        label="结束时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="staffName"
        label="员工"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="production"
        label="工艺"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="statusDesc"
        label="状态"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="showBackDialog(scope.$index)"
            v-if="
              (scope.row.endTime == null || scope.row.endTime == '') &&
              scope.row.status != '2' &&
              scope.row.backFlag == '1' &&
              scope.row.startTime != null &&
              scope.row.startTime != '' &&
              scope.row.ngTag != '1'
            "
            >回退</el-button
          >
          <el-button
            type="text"
            v-if="
              scope.row.status != '2' &&
              (scope.row.endTime == null || scope.row.endTime == '') &&
              scope.row.replenishmentFlag == '1'
            "
            @click="showDialog(scope.row)"
            >补料申请</el-button
          >
          <el-button type="text" @click="showSpecDialog(scope.row)"
            >规格流转详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>


    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="count"
      >
      </el-pagination>
    </div>

    <el-dialog title="回退" :visible.sync="backDialog" width="400px">
      <el-form>
        <el-form-item label="规格" prop="backSpecs" label-width="70px">
          <el-input v-model="backSpecs" style="width: 215px" disabled="true" />
        </el-form-item>
        <el-form-item label="模具编号" prop="backNumber">
          <el-input v-model="backNumber" style="width: 215px" disabled="true" />
        </el-form-item>
        <el-form-item label="当前工艺" prop="nowProduction">
          <el-input
            v-model="nowProduction"
            style="width: 215px"
            disabled="true"
          />
        </el-form-item>
        <div
          v-if="
            nowProduction == '品管镜检' ||
            nowProduction == '品管挪检' ||
            nowProduction == '品管车制' ||
            nowProduction == '品管打码' ||
            nowProduction == '品管包装'
          "
        >
          <el-form-item label="回退工艺(多选)"></el-form-item>
          <!-- 如果是品管进行回退  则由品管进行回退多选 指定回退执行的工艺 -->
          <el-checkbox-group
            style="margin-top: -10px"
            v-model="checkedProductions"
            @change="handleCheckedProductionsChange"
          >
            <el-checkbox
              v-for="production in backProductionList"
              :label="production"
              :key="production"
              :value="production"
              >{{ production }}</el-checkbox
            >
          </el-checkbox-group>
          <!-- </el-form-item> -->
        </div>
        <div v-else style="font-size: 20px">是否回退到上一工艺？</div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="backDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmBack()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 补料申请打印 -->
    <el-dialog title="" :visible.sync="dialogVisible" width="800px">
      <el-form
        :model="replenishment"
        :rules="rules"
        class="ruleForm"
        ref="ruleForm"
        label-width="120px"
        id="printMe"
      >
        <div class="class_title">补料申请单</div>
        <div class="line">
          <div class="line-left">
            <el-form-item label="客户">
              <el-input
                v-model="replenishmentParams.customer"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="客户订单号">
              <el-input
                v-model="replenishmentParams.custOrderNo"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="line">
          <div class="line-left">
            <el-form-item label="订单号">
              <el-input v-model="replenishment.orderNo" disabled></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="模具编号">
              <el-input v-model="replenishment.number" disabled></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="规格">
              <el-input v-model="replenishment.specs" disabled></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="工艺">
              <el-input v-model="replenishment.production" disabled></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="line">
          <div class="line-left">
            <el-form-item label="原石供应商">
              <el-input
                v-model="replenishment.roughSupplier"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="原石料号">
              <el-input
                v-model="replenishmentParams.rough_item_no"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="公差上限">
              <el-input
                v-model="replenishmentParams.tolerance_up"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="公差下限">
              <el-input
                v-model="replenishmentParams.tolerance_down"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="压缩角公差上限">
              <el-input
                v-model="replenishmentParams.compress_up"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="压缩角公差下限">
              <el-input
                v-model="replenishmentParams.compress_down"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="定经公差上限">
              <el-input
                v-model="replenishmentParams.dingjing_up"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="定经公差下限">
              <el-input
                v-model="replenishmentParams.dingjing_down"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="外壳尺寸">
              <el-input
                v-model="replenishmentParams.shell_size"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="激光参数-角度">
              <el-input
                v-model="replenishmentParams.laser_param_angle"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="激光参数-上限1">
              <el-input
                v-model="replenishmentParams.laser_param_up1"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="激光参数-上限2">
              <el-input
                v-model="replenishmentParams.laser_param_up2"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="激光参数-下限1">
              <el-input
                v-model="replenishmentParams.laser_param_down1"
                disabled
              ></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="激光参数-下限2">
              <el-input
                v-model="replenishmentParams.laser_param_down2"
                disabled
              ></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="责任部门">
              <el-select
                v-model="replenishment.dept"
                placeholder="请选择责任部门"
                @change="deptChange()"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in depart"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="不良原因">
              <el-select
                v-model="replenishment.reason"
                placeholder="请选择拒绝原因"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in rejectReason"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="责任设备">
              <el-input v-model="replenishment.equipmentName"></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="设备编号">
              <el-input v-model="replenishment.equipmentNumber"></el-input>
            </el-form-item>
          </div>
        </div>

        <div class="line">
          <div class="line-left">
            <el-form-item label="可做规格">
              <el-input v-model="replenishment.useSpecs"></el-input>
            </el-form-item>
          </div>
          <div class="line-right">
            <el-form-item label="角度">
              <el-input v-model="replenishment.angle"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-print="'#printMe'" type="primary">打印</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog :title="specTitle" :visible.sync="specDialog" width="90%">
      <div v-if="totalStepsSpec">
        <steps2
          :currentStep="currentStepSpec"
          :totalSteps="totalStepsSpec"
          :stepsData="stepsDataSpec"
        />
      </div>
    </el-dialog>

    <el-dialog :visible.sync="numDialog" width="500px">
      <template>
        <el-table :data="subList" height="250">
          <el-table-column fixed prop="specs" label="规格" width="150">
          </el-table-column>
          <el-table-column fixed prop="okNum" label="Ok数量" width="150">
          </el-table-column>
          <el-table-column fixed prop="ngNum" label="NG数量" width="150">
          </el-table-column>
        </el-table> </template
    ></el-dialog>

    <el-dialog :visible.sync="numDialog2" width="500px">
      <template>
        <el-table :data="subList" height="250">
          <el-table-column fixed prop="specs" label="规格" width="150">
          </el-table-column>
          <el-table-column fixed prop="okNum" label="Ok数量" width="150">
          </el-table-column>
          <el-table-column
            fixed
            prop="replenishmentCount"
            label="补料申请数量"
            width="150"
          >
          </el-table-column>
        </el-table> </template
    ></el-dialog>
  </div>
</template>
  

<script>
import api from "../../../api";
import steps from "./steps.vue";
import steps2 from "./steps2.vue";
import commonInfo from "@/utils/common";
import {
  ResponsibleDepartment,
  OrderRejectReason2,
  OrderRejectReason,
} from "../../common/enum";

export default {
  name: "flowDetail",
  components: {
    steps,
    steps2,
  },
  data() {
    return {
      pageSizeArr: commonInfo.pageSizeArr,
      subList: [],
      numDialog: false,
      numDialog2: false,
      inputSpecs: "",
      inputNumber: "",
      isLoading: false,
      tableData: [],
      tableData2: [],
      tableData3: [],
      dialogVisible: false,
      specDialog: false,
      specDialog2: false,
      replenishment: {
        angle: "",
        customer: "",
        checkPerson: "",
        checkPersonName: "",
        equipmentName: "",
        equipmentNumber: "",
        checkTime: "",
        createTime: "",
        dept: "",
        number: "",
        operator: "",
        operatorName: "",
        orderNo: "",
        production: "",
        reason: "",
        remark: "",
        specs: "",
        staffId: "",
        staffName: "",
        staffNo: "",
        status: "",
        useSpecs: "",
      },
      stepsDesc: [],
      rules: {
        reason: [{ required: true, message: "请输入原因", trigger: "change" }],
        dept: [
          { required: true, message: "请选择责任部门", trigger: "change" },
        ],
        useSpecs: [{ required: true, message: "请输入", trigger: "blur" }],
        angle: [{ required: true, message: "请填写", trigger: "blur" }],
      },
      rejectReason: [],
      depart: [],
      stepsData: [],
      currentStep: 0,
      totalSteps: 0,
      stepsDataSpec: [],
      currentStepSpec: 0,
      totalStepsSpec: 0,
      orderProduction: [],
      clickStep: 0,
      backDialog: false,
      selectedBackIndex: -1,
      specTitle: "",
      orderNo: "",
      nowProduction: "",
      backProduction: null,
      backSpecs: "",
      backNumber: "",
      backProductionList: [],
      replenishmentParams: {},
      checkedProductions: [],
      count:0,
      pageNo:1,
      pageSize:10,
    };
  },
  created() {
    this.depart = ResponsibleDepartment;
  },
  mounted() {
    this.orderNo = this.$route.query.id;
    this.getData();
  },
  methods: {

    deptChange() {
      console.info(this.replenishment.dept);
      if ("材质" == this.replenishment.dept) {
        this.rejectReason = OrderRejectReason2;
      } else {
        this.rejectReason = OrderRejectReason;
      }
    },

    resetInput() {
      this.tableData = this.tableData2;
      this.inputSpecs = "";
      this.inputNumber = "";
    },
    inputSearch() {
      this.pageNo=1;
      this.getTableData(this.clickStep);
    },

    handleCheckedProductionsChange() {
      console.info(this.checkedProductions);
      this.backProduction = this.checkedProductions.toString();
      console.info(this.backProduction);
    },

    getData() {
      api
        .orderProductionRecord({ orderNo: this.orderNo })
        .then((res) => {
          if (res.code === 200) {
            this.stepsData = [];
            for (let i = 0; i < res.data.length; i++) {
              const element = res.data[i];
              const time =
                element.startTime && element.endTime
                  ? element.startTime + "~" + element.endTime
                  : element.startTime && !element.endTime
                  ? element.startTime
                  : "";
              console.info(1);
              console.info(time);
              this.stepsDesc.push(time);
              if (element.status == "1") this.currentStep = i + 1;
              this.stepsData.push({
                label: element.production,
                orderNo: element.orderNo,
                desc: time,
                total: element.total,
                ngNumStr: element.ngNumStr,
                hasDone: element.hasDone,
                toBeCompleted: element.toBeCompleted,
                status: element.status,
              });
              // if (element.status == "2") this.currentStep = i + 1;
            }
            this.orderProduction = res.data;
            this.totalSteps = res.data.length;
            this.clickStep = this.currentStep - 1;
            if (this.clickStep < 0) this.clickStep = 0;
            this.getTableData(this.clickStep);
          }
        })
        .catch();
    },
    clickSteps(index) {
      this.clickStep = index - 1;
      this.getTableData(this.clickStep);
    },

    querySubList(orderNo, production) {
      debugger
      api
        .subNum({
          orderNo: orderNo,
          production: production,
        })
        .then((res) => {
          this.subList = res.data.list;
          debugger
          if (res.data.type == "U") {
            this.numDialog = true;
          } else {
            this.numDialog2 = true;
          }
        });
    },

    

  //分页
  handleCurrentChange(val) {
    console.info("val====",val)
      this.pageNo = val;
      this.getTableData(this.clickStep);
    },

    getTableData(step) {
      console.info(this.orderProduction);
      console.info(step);
      if (this.orderProduction.length == 0) {
        return;
      }
      // this.isLoading = true;
      const loading = this.$loading({
        lock: true,
        text: "数据加载中......",
        fontSize: "20px",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      api
        .orderItemProductionRecord({
          orderNo: this.orderNo,
          production: this.orderProduction[step].production,
          number:this.inputNumber,
          specs:this.inputSpecs,
          pageNo:this.pageNo,
          pageSize:this.pageSize,
        })
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.list;
            this.tableData2 = res.data.list;
            this.isLoading = false;
            this.count=res.data.count;
          }
          loading.close();
        })
        .catch();

      // 获取可以回退的工艺
      var flag = 1;
      this.backProductionList = [];
      console.info("可回退列表");
      console.info(this.backProductionList);
    },
    showDialog(row) {
      //查询申请人是谁
      /**
            如果row.staffId等于空 则需要查询上一工序是谁流转的
         */

      var staffId = row.staffId;
      var staffName = row.staffName;
      var staffNumber = row.staffNumber;
      console.info("1111" + row.staffId);
      if (row.staffId == null || row.staffId == "") {
        var index = 0;
        for (var i = 1; i <= this.stepsData.length; i++) {
          if (row.production == this.stepsData[i - 1].label) {
            index = i;
            console.info("1==" + i);
            var stepProduction = "";
            if (i == 1) {
              stepProduction = this.stepsData[i - 1].label;
            } else {
              stepProduction = this.stepsData[i - 2].label;
            }
          }
        }
      } else {
        this.replenishment = {
          number: row.number,
          orderNo: this.orderNo,
          production: row.production,
          roughSupplier: row.roughSupplier,
          staffNo: staffNumber,
          staffName: staffName,
          staffId: staffId,
          specs: row.specs,
        };
        this.dialogVisible = true;
      }
      this.replenishment = {
        number: row.number,
        orderNo: this.orderNo,
        production: row.production,
        roughSupplier: row.roughSupplier,
        staffNo: staffNumber,
        staffName: staffName,
        staffId: staffId,
        specs: row.specs,
      };
      this.dialogVisible = true;

      api
        .queryReplenishmentParams({ orderNo: this.orderNo, specs: row.specs })
        .then((res) => {
          console.info("补料参数");
          console.info(res.data);
          this.replenishmentParams = res.data;
        });

      console.info(this.replenishment);
    },
    showSpecDialog(row) {
      api
        .orderItemProductionInfo({
          orderNo: this.orderNo,
          number: row.number,
          specs: row.specs,
        })
        .then((res) => {
          if (res.code === 200) {
            this.stepsDataSpec = [];
            for (let i = 0; i < res.data.length; i++) {
              const element = res.data[i];
              const time =
                element.startTime && element.endTime
                  ? element.startTime + "~" + element.endTime
                  : element.startTime && !element.endTime
                  ? element.startTime
                  : "";
              this.stepsDataSpec.push({
                label: element.production,
                desc: time,
                orderNo: element.orderNo,
                status: element.status,
              });
              if (element.status == "1") this.currentStepSpec = i + 1;
            }
            this.orderProduction = res.data;
            this.totalStepsSpec = res.data.length;
            this.specTitle = `订单编号【${this.orderNo} 】模具编号【${row.number}】`;
            this.specDialog = true;
          }
        })
        .catch();
    },
    confirmBack() {
      if (
        this.nowProduction == "品管镜检" ||
        this.nowProduction == "品管挪检" ||
        this.nowProduction == "品管车制" ||
        this.nowProduction == "品管打码" ||
        this.nowProduction == "品管包装"
      ) {
        if (this.backProduction == null || this.backProduction == "") {
          this.$message.info("请先选择回退工艺");
          return;
        }
      }
      api
        .productionRecordBack({
          orderNo: this.orderNo,
          number: this.tableData[this.selectedBackIndex].number,
          specs: this.tableData[this.selectedBackIndex].specs,
          nowProduction: this.tableData[this.selectedBackIndex].production,
          backProduction: this.backProduction,
        })
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功！");
            this.getTableData(this.clickStep);
          }
          this.backDialog = false;
        });
    },
    showBackDialog(index) {
      this.selectedBackIndex = index;
      this.checkedProductions = [];
      this.backDialog = true;
      this.nowProduction = this.tableData[this.selectedBackIndex].production;
      this.backSpecs = this.tableData[this.selectedBackIndex].specs;
      this.backNumber = this.tableData[this.selectedBackIndex].number;

      api
        .getOrderProductions({
          orderNo: this.tableData[this.selectedBackIndex].orderNo,
          specs: this.tableData[this.selectedBackIndex].specs,
        })
        .then((res) => {
          if (res.code === 200) {
            this.backProductionList = res.data;
          }
        })
        .catch();
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          api.replenishmentAdd(this.replenishment).then((res) => {
            if (res.code === 200) {
              this.dialogVisible = false;
              this.$message.success("操作成功！");
              this.getTableData(this.clickStep);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.upload-demo {
  height: 32px;
  display: inline-block;
  margin-left: 10px;
}
.ruleForm {
  width: 400px;
}

.line {
  display: block;
  width: 600px;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 178px !important;
}
.el-select > .el-input {
  display: block;
  width: 178px;
}

.el-select {
  display: inline-block;
  position: relative;
  width: 178px !important;
}
.line-left {
  display: inline-block !important;
  width: 300px;
}
.line-right {
  display: inline-block !important;
  width: 300px;
}

.el-select {
  display: inline-block;
  position: relative;
  width: 200px;
}

.class_title {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  margin-left: 70%;
}
</style>

